<template>
  <div class="detail">
    <div class="top-swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in detail.pics" :key="item.id">
                <img :src="item.pic" alt="banner">
            </van-swipe-item>
        </van-swipe>
        <div class="back-icon" @click="$router.back()">
            <van-icon class="back" name="arrow-left" />
        </div>
        <div class="title" v-html="basicInfo.name"></div>
        <p class="desc">{{basicInfo.characteristic}}</p>
        <div class="price-box">
            <section>
                <span class="min-price">底价<em>￥{{basicInfo.minPrice}}</em></span>
                <span>原价{{basicInfo.originalPrice}}</span>
            </section>
            <section>库存{{basicInfo.stores}}</section>
        </div>
    </div>

    <div class="good-intr">
        <ul>
            <li @click="choseTab(0)" :class="ind === 0 ? 'active' : ''">商品介绍</li>
            <li @click="choseTab(1)" :class="ind === 1 ? 'active' : ''">商品评价</li>
        </ul>
        <div v-if="ind === 0" class="content-box" v-html="detail.content"></div>
        <div v-else>
            <recomend-card v-for="item in reputations" :key="item.id" :rep="item.goods" :user="item.user"></recomend-card>
        </div>
    </div>
    
    <div class="bottom-set-box">
        <div class="bargin-router" v-if="$route.query.type === 'bargin'">
            立即发起砍价，最低可砍到1元
        </div>
        <div v-else class="add-card">
            <ul>
                <li class="icon-box">
                    <van-icon name="service-o" />
                </li>
                <li class="icon-box" @click="$router.push('/cart')">
                    <van-icon name="shopping-cart-o" />
                    <span class="good-count">{{num}}</span>
                </li>
                <li class="icon-box">
                    <van-icon name="star-o" />
                </li>
                <li class="btn">立即购买</li>
                <li class="btn add" @click="showPop">加入购物车</li>
            </ul>
        </div>
    </div>
    <van-popup v-model:show="show" position="bottom">
        <div class="top-content">
            <img :src="basicInfo.pic" />
            <div class="good-info">
                <h3>{{basicInfo.name}}</h3>
                <span>￥{{basicInfo.minPrice}}</span>
            </div>
            <van-icon class="closed" name="cross" />
        </div>
        <div class="sku">
            <div v-for="(item, index) in properties" :key="item.id">
                <h3>{{item.name}}</h3>
                <ul>
                    <li @click="choseSku(index, li)" :class="ids.includes(li.id) ? 'active' : ''" v-for="li in item.childsCurGoods" :key="li.id">
                        {{li.name}}
                    </li>
                </ul>
            </div>
        </div>
        <div class="num-set">
            <span>购买数量</span>
            <van-stepper v-model="count" min="1" />
        </div>
        <div class="btn-add" @click="addCart">加入购物车</div>
    </van-popup>
 </div>
</template>

<script>
import { detail, reputations } from '@/api'
import { useRoute, useRouter } from 'vue-router'
import { reactive, toRefs, ref, computed } from 'vue'
import { Toast } from 'vant'
import recomendCard from '@/components/recomend/recomendCard'
import { useStore } from 'vuex'
export default {
    components: {
        recomendCard
    },
    setup() {
        // console.log(useRoute());
        // 通过调用useRoute函数可以获取当前页面的路由对象
        // 在路由对象中可以获取路由参数 包括query参数和params参数
        // 虽然在query中我们看到参数在value中 但是我们获取参数不需要写value
        // 也就是说不能写成 route.query.value.id 而是要写成 route.query.id
        let store = useStore()
        let route = useRoute()
        let router = useRouter()
        let state = reactive({
            detail: {},
            basicInfo: {},
            reputations: [],
            show: false,
            properties: [],
            value: 1,
            ids: [],
            count: 1
        })

        let type1 = {} // 用来保留第一类规格的数据
        let type2 = {} // 用来保留第二类规格的数据

        let ind = ref(0)
        if(route.query.show) {
            state.show = route.query.show
        }
        // console.log(route.query);
        detail(route.query.id).then(res => {
            // console.log(res);
            // 无论是vue2 还是 vue3中 请求过来的数据 对象使用的时候 如果连续打点都会报错
            state.detail = res.data
            state.basicInfo = res.data.basicInfo
            state.properties = res.data.properties
        })
        
        // 定义tab切换的点击事件
        function choseTab(num) {
            ind.value = num
        }

        // 获取商品评价的数据
        reputations(route.query.id).then(res => {
            // console.log(res);
            state.reputations = res.data
        })

        // 定义显示弹出层的事件
        function showPop() {
            state.show = true
            // console.log(state.show)
        }

        // 选择规格的点击事件
        function choseSku(ind, item) {
            // ind 标记第几类规格的下标
            // item是我们具体选中的规格
            // console.log(ind, item)
            // 将选中的类别的规格数据id放入ids数组中
            state.ids[ind] = item.id
            // console.log(state.ids);
            if(ind === 0) {
                type1 = item
            } else if(ind === 1) {
                type2 = item
            }
            // console.log(state.ids)
        }

        // 加入购物车的逻辑
        function addCart() {
            if(state.ids.length === 0) {
                Toast('请选择规格')
                return
            } else if(state.properties.length > 1) {
                if(!type2.id) {
                    Toast('请选择规格')
                    return
                }
            }
            let good = {
                btm: type2.name,
                btmid: type2.id,
                checked: true,
                checkedtwo: false,
                lishow: false,
                number: state.count,
                price: state.basicInfo.minPrice,
                src: state.basicInfo.pic,
                title: state.basicInfo.name,
                up: type1.name,
                upid: type1.id,
            }
            if(localStorage.getItem('token')) {
                store.commit('changeProducts', good)
                state.show = false
            } else {
                router.push({
                    name: 'login',
                    params: {
                        url: '/detail',
                        id: route.query.id
                    }
                })
            }
        }
        return {
            ...toRefs(state),
            ind,
            choseTab,
            showPop,
            choseSku,
            addCart,
            num: computed(() => store.getters.count)
        }
    }
 }
</script>

<style scoped lang="scss">
.detail {
    height: 100%;
    overflow: auto;
}
.my-swipe {
    img {
        width: 100%;
        height: 800px;
    }
}
.top-swiper {
    position: relative;
    background-color: #fff;
    padding-bottom: 20px;
    .back-icon {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 20px;
        left: 20px;
        border-radius: 60px;
        border: 1px solid #fff;
        text-align: center;
        padding: 10px;
        .back {
            background-color: #fff;
            border-radius: 50%;
            font-size: 42px;
            position: absolute;
            left: 3px;
            top: 3px;

        }
    }
}
.title {
    font-size: 38px;
    padding-left: 40px;
    margin-top: 40px;
    margin-bottom: 30px;
}
.desc {
    font-size: 24px;
    color: #888;
    padding-left: 40px;
    margin-bottom: 30px;
}
.price-box {
    padding-left: 40px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-size: 26px;
    padding-right: 30px;
    color: #888;
}
.min-price {
    color: #d00000;
    margin-right: 30px;
    em {
        font-size: 32px;
        font-weight: 300;
    }
}
.good-intr {
    background-color: #fff;
    margin-top: 30px;
    font-size: 30px;
    ul {
        display: flex;
        width: 100%;
        li {
            flex-basis: 50%;
            text-align: center;
            line-height: 100px;
        }
        .active {
            border-bottom: 4px solid #d00000;
        }
    }
}
.bottom-set-box {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 5;
    .bargin-router {
        width: 100%;
        line-height: 100px;
        background-color: #B7282E;
        color: #fff;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
    }
}
.add-card {
    width: 100%;
    height: 100px;
    background-color: #fff;
    box-shadow: 0 0 15px 1px #bebebe;
    ul {
        display: flex;
        font-size: 30px;
    }
    .icon-box {
        width: 110px;
        font-size: 40px;
        text-align: center;
        line-height: 100px;
        border-right: 1px solid #ccc;
        position: relative;
    }
    .btn {
        width: calc((100% - 330px)/2);
        text-align: center;
        line-height: 100px;
    }
    .btn.add {
        background-color: #B7282E;
        color: #fff;
    }
}
.top-content {
    display: flex;
    padding: 40px;
    border-bottom: 1px solid #E9E9E9;
    position: relative;
    img {
        width: 140px;
        height: 140px;
        flex-shrink: 0;
    }
    .good-info {
        font-size: 28px;
        margin-left: 30px;
        padding-top: 20px;
        h3 {
            margin-bottom: 40px;
            color: #222;
        }
        span {
            color: #d00000;
        }
    }
    .closed {
        position: absolute;
        right: 40px;
        top: 20px;
        font-size: 36px;
        color: #333;
    }
}
.sku {
    padding: 40px 20px;
    color: #333;
    font-weight: 300;
    border-bottom: 1px solid #E9E9E9;
    h3 {
        font-size: 28px;
        margin-bottom: 20px;
    }
    ul {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin-bottom: 30px;
        li {
            font-size: 26px;
            padding: 16px 30px;
            border: 1px solid #E9E9E9;
            border-radius: 8px;
            margin-top: 20px;
            margin-right: 16px;
        }
        .active {
            border-color: #d00000;
        }
    }
}
.num-set {
    padding: 40px 30px;
    font-size: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-add {
    width: 100%;
    line-height: 90px;
    color: #fff;
    font-size: 28px;
    text-align: center;
    background: #b7282e;
}
.good-count {
    font-size: 24px;
    width: 30px;
    height: 30px;
    display: inline-block;
    background: #d00000;
    color: #fff;
    border-radius: 40px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    top: 14px;
    right: 14px;
}
</style>